import React, { Component } from 'react';
import { connect } from 'dva';
import { Table, Input, DatePicker, Button, Row, Col, Select, Form, Popconfirm, Popover, Modal } from 'antd';
import UpdateBuySiteModel from './UpdateBuySiteModel';
import BuySiteAndCityDetailModal from './BuySiteAndCityDetailModal';

const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker } = DatePicker;

@window.regStateCache
class BuySiteAndCity extends Component {

  constructor() {
    super();
    this.state = {
    	modalVisible: false,
    	addUpdateStatus: 0,
    };
  }

  handleSubmit(e, page, pageSize) {
    const { currentPageSize } = this.props;
    if (e) e.preventDefault();
	  this.props.form.validateFieldsAndScroll((err, values) => {
	    if (err) return;
	    this.props.dispatch({
	      type: 'purchase/itemBuySiteAndCity',
	      payload: {
	        ...values,
	        pageIndex: typeof page === 'number' ? page : 1,
	        pageSize: pageSize || currentPageSize,
	      },
	    });
	  });
  }

  updateBuySiteDetail(id) {
    const p = this;
    p.setState({
	  	addUpdateStatus: 1
	  });
    this.setState({ modalVisible: true }, () => {
      p.props.dispatch({ type: 'purchase/queryUpdateSiteDetail', payload: { id } });
    });
  }

	deleteBuySiteDetail(id) {
		const p = this;
		p.props.dispatch({ 
			type: 'purchase/deleteBuySiteAndCity',
			payload: { id },
			cb() {
				p._refreshData();
			}
		});
	}

	closeModal() {
	  this.setState({ modalVisible: false }, () => {
	    let that = this;
	    setTimeout(function(){
	    		that._refreshData();
	    }, 1000);
	  });
	  this.props.dispatch({
	  	type: 'purchase/saveDetailValue',
	  	payload: {}
	  });
	  this.setState({
	  	addUpdateStatus: 0
	  });
	}

  render() {
    const p = this;
    const { form,itemBuySiteNoPagingList = [], buySiteCityList = [], currentPage, currentPageSize, buySiteCityTotal,siteDetailValues={}, dispatch} = p.props;
    const { getFieldDecorator,resetFields } = form;
    const { modalVisible } = p.state;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
    };
    const columnsList = [
      { title: '采购站点', dataIndex: 'buySite', key: 'buySite', width: 130 },
      { title: '采购城市', dataIndex: 'buyCity', key: 'buyCity', width: 130 },
      { title: '店铺位置', dataIndex: 'shopSite', key: 'shopSite', width: 130 },
      { title: '税率(%)', dataIndex: 'buyTax', key: 'buyTax', width: 130 },
      { title: '操作', 
      	dataIndex: 'operator', 
      	key: 'operator', 
      	width: 130,
      	render(t,r){
      		return(
      			<div>
              <a href="javascript:void(0)" style={{ margin: '0 5px' }} onClick={p.updateBuySiteDetail.bind(p, r.id)}>修改</a>
              <Popconfirm title="确认删除？" onConfirm={p.deleteBuySiteDetail.bind(p, r.id)} >
	                <a href="javascript:void(0)" style={{ margin: '0 5px' }} >删除</a>
	            </Popconfirm>
		        </div>
      		);
      	}
      },
    ];

    const paginationProps = {
      total: buySiteCityTotal,
      current: currentPage,
      pageSize: currentPageSize,
      showSizeChanger: true,
      onChange(pageIndex) {
        p.handleSubmit(null, pageIndex);
      },
      pageSizeOptions: ['20', '50', '100', '200', '500'],
      onShowSizeChange(current, size) {
        p.handleSubmit(null, 1, size);
      },
    };

    return (
      <div>
        <div className="refresh-btn"><Button type="ghost" size="small" onClick={this._refreshData.bind(this)}>刷新</Button></div>
        <Form onSubmit={this.handleSubmit.bind(this)}>
          <Row gutter={20} style={{ width: 800 }}>
            <Col span="8">
              <FormItem
                label="采购站点"
                {...formItemLayout}
                labelCol={{ span: 8 }}
              >
                {getFieldDecorator('buySite', {})(
                <Input placeholder="请输入站点名称" />)}
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem
                label="采购城市"
                {...formItemLayout}
                labelCol={{ span: 8 }}
              >
                {getFieldDecorator('buyCity', {})(
                <Input placeholder="请输入站点名称" />)}
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem
                label="店铺位置"
                {...formItemLayout}
                labelCol={{ span: 8 }}
              >
                {getFieldDecorator('shopSite', {})(
                <Input placeholder="请输入站点名称" />)}
              </FormItem>
            </Col>
          </Row>
          <Row style={{ marginLeft: 13 }}>
            <Col className="listBtnGroup">
              <Button htmlType="submit" size="large" type="primary">查询</Button>
              <Button size="large" type="ghost" onClick={() => { resetFields(); }}>清空</Button>
            </Col>
          </Row>
          <Row className="operBtn">
                 <Button type="primary" style={{ float: 'left' }} size="large" onClick={() => this.setState({ modalVisible: true })}>添加站点明细</Button>
          </Row>
        </Form>
        <Row>
          <Col>
            <Table
              columns={columnsList}
              dataSource={buySiteCityList}
              bordered
              size="large"
              pagination={paginationProps}
            />
          </Col>
        </Row>
        <BuySiteAndCityDetailModal
          visible={modalVisible}
          dispatch={dispatch}
          close={this.closeModal.bind(this)}
          modalValues={siteDetailValues}
          itemBuySiteNoPagingList={itemBuySiteNoPagingList}
	  			addUpdateStatus={p.state.addUpdateStatus}
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  const {buySiteCityPageSize, buySiteCityPage,buySiteCityList,buySiteCityTotal,itemBuySiteNoPagingList,siteDetailValues} = state.purchase;
  return {
    buySiteCityList,
    buySiteCityTotal,
    itemBuySiteNoPagingList,
    siteDetailValues,
    currentPage:buySiteCityPage,
    currentPageSize:buySiteCityPageSize,
  };
}

export default connect(mapStateToProps)(Form.create()(BuySiteAndCity));
